<script setup lang="ts">
import { computed } from 'vue';
import { useAppStore } from '@/store/modules/app';
import UserInfoCard from '@/components/UserInfoCard.vue'
const appStore = useAppStore();
const gap = computed(() => (appStore.isMobile ? 0 : 16));
</script>

<template>
  <el-card>
    <div class="header-banner p-12px overflow-hidden bg-primary bg-opacity-10 rounded-4px">
      <el-row :gutter="gap">
        <el-col :span="24">
          <h2 class="text-24px font-bold mb-12px">欢迎使用客户端系统</h2>
          <p class="text-16px text-gray-600 dark:text-gray-300 mb-8px">
            这是一个独立的客户端系统，与后台管理系统完全分离。
          </p>
          <p class="text-14px text-gray-500 dark:text-gray-400">
            您可以在这里查看和管理您的个人信息、订单、以及其他客户端相关功能。
          </p>
        </el-col>
      </el-row>
    </div>
  </el-card>
</template>

<style scoped>
.header-banner {
  min-height: 160px;
}
</style> 